
import React, { useState, useEffect } from 'react';
import { Button, Checkbox, message } from 'antd';
import Pubsub from 'pubsub-js'
import {
    FormOutlined
} from '@ant-design/icons';
import ModifiName from './modifiName'


import './index.css'
import '../slefSeting/button.css'
const SelfSeting = (props) => {
    // const p2 = props
    let allfalge = true
    const startArr = [
        { id: 0, name: '联系人', showName: '联系人', columnShow: true, require: false },
        { id: 1, name: '相关商品', showName: '相关商品', columnShow: true, require: false },
        { id: 2, name: '售后分类', showName: '售后分类', columnShow: true, require: false },
        { id: 3, name: '反馈时间', showName: '反馈时间', columnShow: true, require: false },
        { id: 4, name: '反馈主题', showName: '反馈主题 ', columnShow: true, require: false },
        { id: 5, name: '备注', showName: '备注', columnShow: true, require: false },
        { id: 6, name: '售后状态', showName: '售后状态', columnShow: true, require: false },
        { id: 7, name: '处理时间', showName: '处理时间', columnShow: true, require: false },
        { id: 8, name: '处理结果', showName: '处理结果', columnShow: true, require: false },
        { id: 9, name: '业务员', showName: '业务员', columnShow: true, require: false },
        { id: 10, name: '录入时间', showName: '录入时间', columnShow: true, require: false }
    ]
    const { changeSeting } = props
    const [tableData, setTabledata] = useState(startArr)
    const [changemodifi, setchangemodifi] = useState(false)//显示隐藏自定义设置变量
    const [modifiId, setModifiId] = useState({})
    //选择showName和require修改(修改处理函数)
    function onChangeHeadle(e, selectId, selectName, falge) {
        let arr = []
        const stateSelcet = falge !== 1 ? e.target.checked : ''
        for (let i = 0; i <= tableData.length - 1; i++) {
            if (tableData[i].id === selectId && selectName === 'columnShow') {//修改列表显示
                tableData[i].columnShow = stateSelcet
                arr.push(tableData[i])
            } else if (tableData[i].id === selectId && selectName === 'require') {//修改是否必填
                tableData[i].require = stateSelcet
                arr.push(tableData[i])
            } else if (tableData[i].id === selectId && falge === 1) { //修改自定义选择名称处理函数
                // console.log("@@@@@@@@@",selectId, selectName, falge);
                tableData[i].showName = selectName
                arr.push(tableData[i])
            } else {
                arr.push(tableData[i])
            }
        }
        console.log('自定义设置', arr);
        //调用修改table数据
        setTabledata(arr)
        Pubsub.publish('tableTitle', tableData)
    }
    //关闭弹窗
    const coloseHeadle = (startArr) => {
        // Pubsub.publish('tableTitle', startArr)
        // setTabledata(startArr)
        changeSeting()
        // console.log("startArr", startArr);
    }
    //修改显示名称
    function modifiName(eid, ename) {
        // console.log(eid,ename);
        setModifiId({ eid, ename })
        // setchangemodifi('modifiName-contanier')
        setchangemodifi(true)
    }
    //关闭修改字段弹框
    function colseModifiName() {
        /*  changemodifi === 'modifiName-contanier' ? setchangemodifi('modifiName-contanier2') : setchangemodifi('modifiName-contanier') */
        setchangemodifi(false)
    }
    //修改自定义选择名称处理函数
    /*  function modifiHedle(id, value) {
         console.log("das", 'id:', id, 'value:', value, p2);
         let arr = []
         for (let i = 0; i <= tableData.length - 1; i++) {
             if (tableData[i].id === id) {
                 tableData[i].showName = value
                 arr.push(tableData[i])
             } else {
                 arr.push(tableData[i])
             }
             //调用修改table数据
             setTabledata(arr)
         }
     } */

    //保存关闭
    function hideSetingHeadle() {
        changeSeting()
        Pubsub.publish('tableTitle', tableData)
        // console.log(p.changeSeting);
    }
    useEffect(() => {
        Pubsub.publish('tableTitle', tableData)
        return () => {

        }
    }, [])
    //自定义字段设置
    let falge = true
    const fieldHeadle = () => {
        setTimeout(() => {
            falge = true
        }, 5000);
        if (falge) {
            falge = false
            message.error({ content: '此功能还未开放！' });
        }
    }

    //渲染
    function showHtml() {
        let arr = allfalge ? tableData : []
        return (
            arr.map(item => {
                return (
                    <tr key={item.id}>
                        <td style={{ fontWeight: '700' }} id={item.id}>{item.name}</td>
                        <td id={item.id}>{item.showName}<FormOutlined className='selfSeting-icon' onClick={(x, y) => modifiName(item.id, item.showName)} /></td>
                        <td id={item.id}><Checkbox checked={item.columnShow} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'columnShow')} /></td>
                        <td id={item.id}><Checkbox checked={item.require} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'require')} /></td>
                    </tr>
                )
            })
        )
    }
    return (
        <div className="selfSeting-contanier seting-them">
            <header className='seting-them' >
                <div className='seting-them seting-title'>自定义设置</div>
                <div className='btn-detel' onClick={coloseHeadle}>X</div>
            </header>
            <section className='selfSeting-table-containter'>
                <table className='table-box'>
                    <thead>
                        <tr>
                            <th>字段名称</th>
                            <th>显示名称</th>
                            <th>列名显示</th>
                            <th>是否必填</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            /* tableData.map(item => {
                                return (
                                    <tr key={item.id}>
                                        <td style={{ fontWeight: '700' }} id={item.id}>{item.name}</td>
                                        <td id={item.id}>{item.showName}<FormOutlined className='selfSeting-icon' onClick={(x, y) => modifiName(item.id, item.showName)} /></td>
                                        <td id={item.id}><Checkbox checked={item.columnShow} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'columnShow')} /></td>
                                        <td id={item.id}><Checkbox checked={item.require} onChange={(e, x, y) => onChangeHeadle(e, item.id, 'require')} /></td>
                                    </tr>
                                )
                            }) */
                            allfalge ? showHtml() : <h1>1111</h1>
                        }
                    </tbody>
                </table>
                <footer>
                    <div className='slefSeting-setinf' onClick={fieldHeadle}>自定义字段管理</div>
                    <Button type='primary' className='btn-bgc-13' onClick={hideSetingHeadle}>保存</Button>&nbsp;&nbsp;
                    <Button type='primary' className='btn-bgc-12' onClick={coloseHeadle}>关闭</Button>
                </footer>
                {/* 修改弹窗 */}
                <section>
                    <ModifiName setchangemodifi={changemodifi} colseModifiName={colseModifiName} tableData={{ tableData, modifiId, onChangeHeadle }} />
                </section>
            </section>
        </div>
    )
}
export default SelfSeting